<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/6/17
  Time: 16:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      color: sandybrown !important;/* 背景色设为白色 */
      background-color: sandybrown ;
    }
    .header con{
      background-color:  sandybrown !important;
      color: #fff;
      display: flex;
      justify-content: center; /* 水平居中 */
      align-items: center; /* 垂直居中 */
      /* 如果.header有固定高度，可以在这里设置，如果没有，flex布局会根据内容自动调整 */
      height: 200px; /* 例如设置高度为100px，或者使用min-height */
      width: 100%;
    }
    .header-content {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%; /* 占满.header的高度 */
      background-color: transparent; /* 确保没有额外的背景颜色 */
    }

    h1 {
      color: sandybrown; /* 根据需要调整以确保与背景对比 */
      text-align: center;
    }
    .footer{
      background-color: dimgrey !important;
      opacity: 0.5;
      display: flex;
      flex-direction: column;
      justify-content: flex-end; /* 将内容推向flex容器的末端 */
      height: 100px; /* 或者设置为一个合适的高度，或者使用min-height */
    }
    .footer .text-center {
      width: 100%; /* 确保文本容器占满整个footer宽度 */
      text-align: center; /* 水平居中文本 */
      color: white;
    }
    .dropdown {
      position: relative;
      display: inline-block;
    }

    /* 下拉菜单内容的样式 */
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9; /* 与导航栏背景色一致 */
      min-width: 150px;
      max-width: 280px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
      border-radius: 5px;
    }

    /* 下拉菜单项的样式 */
    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
      text-align: left; /* 确保文本左对齐 */
      background-color: #f0f0f0; /* 与导航栏背景色一致 */
      border-radius: 5px;
    }

    /* 鼠标悬停在下拉按钮上时显示下拉菜单 */
    .dropdown:hover .dropdown-content {
      display: block;
      border-radius: 5px;
    }
    /* 鼠标悬停时显示下拉菜单 */
    .nav ul li:hover .dropdown-content {
      display: block;
      border-radius: 5px;
    }
    /* 鼠标悬停在下拉菜单项上时的样式 */
    .dropdown-content a:hover {
      background-color: #f1f1f1; /* 悬停时的背景颜色 */
    }
    .nav{
      background-color:#f0f0f0 !important;
      border-color:#f0f0f0;
      border-top: 1px solid #ccc; /* 上边框颜色 */
    }
    .nav ul {
      background-color: #f0f0f0!important; /* 使用 !important 强制应用样式 */
      color: #f0f0f0;
      display: flex;
      width: 100%;
      justify-content: center;
      padding: 0; /* 移除默认的内边距 */
      margin: 0; /* 移除默认的外边距 */
    }
    .nav ul li {
      position: relative; /* 相对定位 */
      list-style: none;
      display: inline-block;
      margin: 0 30px/* 导航项之间的间距 */
    }
    /* 初始样式：移除链接的下划线 */
    .nav ul li a {
      color: #000; /* 链接颜色设为黑色 */
      padding: 5px 10px; /* 内边距 */
      text-decoration: none; /* 移除下划线 */
      border-radius: 5px; /* 圆角 */
      transition: background-color 0.3s ease; /* 背景色过渡效果 */
    }
    /* 悬停样式：改变背景色，使文字加粗，并添加阴影以实现浮起效果 */
    .nav ul li:hover {
      color: white; /* 悬停时的文字颜色，可以根据需要调整 */
      font-weight: bolder; /* 文字加粗 */
    }
    .nav ul li a:hover {
      background-color: #ccc; /* 鼠标悬停时背景色变为浅灰色 */
    }
    /* 鼠标点击时的样式 */
    .nav ul li:active {
      background-color:dimgrey; /* 点击时的背景颜色 */
      /*border-radius: 12px; !* 点击时更大的圆角半径 *!*/
    }
    .logo {
      display: flex;
      justify-content: center; /* 水平居中 */
      align-items: center; /* 垂直居中 */
      height: 50px; /* 假设的高度，根据实际需要调整 */
      width: 50px; /* 假设的宽度，根据实际需要调整 */
      background-image: url('img/logo2.png');
      background-size: cover;
      margin-right: 15px; /* 与右侧标题保持间距 */
      background-color: transparent; /* 确保logo容器没有背景颜色 */
    }
    .logo img {
      display: block; /* 移除img的默认行内显示行为 */
      max-width: 100%; /* 确保图片最大宽度不超过容器 */
      max-height: 100%; /* 确保图片最大高度不超过容器 */
    }
  </style>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/index.css">
  <script type="text/javascript" src="js/jquery-3.7.1.js"></script>
  <script type="text/javascript" src="js/bootstrap.min.js" ></script>

</head>
<body>
<div class="header con">
  <div class="header-content"> <!-- 新增的flex容器 -->
    <div class="logo">
      <img src="img/logo2.png" style="width: 40px;height: 40px">
    </div>
    <div class="headerright">
      <div>
        <h1>绒享蛋糕订购</h1>
      </div>
    </div>
  </div>
</div>

<div class="nav">
  <ul class="con" style="width:fit-content;margin:0 auto">
    <!-- 一级导航栏：商品菜单 -->
    <li class="dropdown">
      <a href="javascript:void(0)" class="dropbtn">商品菜单</a>
      <div class="dropdown-content">
        <!-- 二级导航栏，循环生成的下拉菜单项 -->
        <c:forEach items="${sessionScope.goodsType}" var="menu1">
          <a href="GoodsMenu?typeId=${menu1.typeId}">${menu1.typeName}</a>
        </c:forEach>
      </div>
    </li>
    <!-- 其他导航项 -->
    <li><a href="cartlist.jsp">购物车</a></li>
    <li><a href="order_list.jsp">我的订单</a></li>
    <li><a href="login.jsp">登录</a></li>
    <li><a href="register.jsp">注册</a></li>
  </ul>
</div>

<div class="container1" style="width: 80% ;margin:auto">
  <!--轮播图部分 -->
  <div id="carouselExampleIndicators" style="border: 0px solid lightyellow;" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
      <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img src="./img/slid.jpg" class="d-block w-100" alt="..." height="500px">
      </div>
      <div class="carousel-item">
        <img src="./img/slid2.jpg" class="d-block w-100" alt="..." height="500px">
      </div>
      <div class="carousel-item">
        <img src="./img/slid3.png" class="d-block w-100" alt="..." height="500px">
      </div>
      <div class="carousel-item">
        <img src="./img/slid4.png" class="d-block w-100" alt="..." height="500px">
      </div>
      <div class="carousel-item">
        <img src="./img/slid5.png" class="d-block w-100" alt="..." height="500px">
      </div>
      <div class="carousel-item">
        <img src="./img/slid6.png" class="d-block w-100" alt="..." height="500px">
      </div>
    <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
      <span class="carousel-control-prev-icon" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
      <span class="carousel-control-next-icon" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </button>
  </div>
  </div>
  <div class="list con">
    <%--          商品推荐部分--%>
    <c:forEach items="${IndexGoodsList}" var="Ig">
      <div class="item">
        <img src=".${Ig.coverImg}" alt="${Ig.goodsName}" width="298px" height="198px">
      </div>
    </c:forEach>
  </div>
</div>
<div class="footer" >
  <div class="container">
    <div class="text-center">
      <h6>如有问题，请联系在线客服。工作时间：9:00-21:00,电话12345243151</h6>
      <br>
      <br>
    </div>
  </div>
</div>
</body>
</html>